<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page session="false"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8" />
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
<title>${pageTitle }</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" type="text/css" href="resources/css/demo.css" />
<link rel="stylesheet" type="text/css"
	href="resources/css/login-reg-style.css" />
<link rel="stylesheet" type="text/css"
	href="resources/css/animate-custom.css" />
<link rel="stylesheet" type="text/css"
	href="resources/css/showLoading.css" />

<!-- Java Script -->
<script src="resources/js/jquery.1.9.js"></script>
<script src="resources/js/jquery.showLoading.js"></script>
<script src="resources/js/jquery.showLoading.min.js"></script>
<script type="text/javascript">
	$(function() {

		
		$("#confirmPassword").focusout(function(){
			
			
			if (!($('#confirmPassword').val() == $('#password').val())
					|| $('#password').val().length < 6) {

				$("#confirmPassword").css("border-color", "#FF0000");
				$("#password").css("border-color", "#FF0000");
				$("#divErrorPsw").show(10);
				 
			} else {
				$("#confirmPassword").css("border-color", "");
				$("#password").css("border-color", "");
				$("#divErrorPsw").hide(10);
			}
			
			
			  $(this).css("background-color","#FFFFFF");
			});
		
		
		$("#submitBtn").click(

				function() {

					if (!$("form")[0].checkValidity()) {
						return true;
					}

					if (!($('#confirmPassword').val() == $('#password').val())
							|| $('#password').val().length < 6) {

						$("#confirmPassword").css("border-color", "#FF0000");
						$("#password").css("border-color", "#FF0000");
						$("#divErrorPsw").show(10);
						return false;
					} else {
						$("#divErrorPsw").hide(10);
					}

					jQuery('#wrapper').showLoading();
					$.ajax({

						type : 'POST',
						url : 'processRegistration.html',
						data : $('#register').serialize(),
						success : function(response) {
							window.location.replace(response)
							jQuery('#wrapper').hideLoading();
						},
						failure : function(reason) {

							jQuery('#wrapper').hideLoading();
						}
					});
					return false;
				});
	});
</script>
</head>
<body>
	<div class="container">

		<header>
			<h1>
				Login and Registration Form <span>with HTML5 and CSS3</span>
			</h1>

		</header>
		<section>
			<div id="container_demo">

				<div id="wrapper">

					<div id="registerForm" class="animate form">
						<form action="" autocomplete="on" id="register" method="post">
							<h1>Sign up</h1>
							<p>
								<label for="firstName" class="uname" data-icon="u">*
									First name</label> <input id="firstName" name="firstName"
									required="required" type="text" placeholder="First name" />
							</p>

							<p>
								<label for="lastName" class="uname" data-icon="u">* Last
									name</label> <input id="lastName" name="lastName" required="required"
									type="text" placeholder="Last name" />
							</p>

							<p>
								<label for="phoneNumber" class="uname" data-icon="e">* Phone number</label> <input
									id="phoneNumber" name="phoneNumber" required="required"
									type="text" placeholder="Phone number" />
							</p>
							<p>
								<label for="email" class="youmail" data-icon="e">* Your
									email</label> <input id="emailsignup" name="email" required="required"
									type="email" placeholder="example@domain.com" />
							</p>
							<div id="divErrorPsw" hidden="true">Incorrect password</div>
							<p>
								<label for="password" class="password" data-icon="p"> *
									Password </label> <input id="password" name="password" type="password"
									required="required"
									placeholder="At least five characters eg. x8df!90eo"
									pattern=".{5,}" />
							</p>
							<p>

								<label for="confirmPassword" class="youpasswd" data-icon="p">Please
									confirm your password </label> <input id="confirmPassword"
									name="confirmPassword" required="required" type="password"
									placeholder="At least five characters eg. x8df!90eo"
									pattern=".{5,}" />

							</p>
							<p class="signin button">
								<input id="submitBtn" type="submit" value="Sign up" />

							</p>
							<p class="change_link">
								Already registered ? <a href="login.html" class="to_register">
									Go and log in </a>
							</p>
						</form>
					</div>

				</div>
			</div>
		</section>
	</div>
</body>
</html>